*{
  margin:0;
  padding:0
}
.shopps{
  position: relative;
  top:1.5rem;
  width:100%;
  height:100%;
  // background: red;
  .selects{
    position: relative;
    left:7%;
    width:20%;
    height:5rem;
    line-height: .6rem;
    font-size: .2rem;
    .all{
      width:100%;
      height:.6rem;
      position: relative;
      top:.6rem;
      border:1px solid lightgray;
      border-radius: .1rem;
      span{
        color:rgb(107, 36, 102);
        letter-spacing: 3px;
        cursor: pointer;
      }
      .imgs{
        position: relative;
        left:18%;
        width:.22rem;
        height:.13rem;
        transform: rotate(180deg);
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Safari and Chrome */
      }
    }
    .all_son{
      position: relative;
      top:.6rem;
      color: #6e769a;
      font-size: .18rem;
      li{
        list-style: none;
        float:left;
        margin-left:25%;
      }
      a{
        text-decoration: none;
        color: #6e769a;
      }
      a.router-link-active{
        color:rgb(107, 36, 102);
      }
    }
  }
  .detail{
    width:72%;
    height:100%;
    position: absolute;
    top:0.5rem;
    left:27.5%;

    li{
      width:2.2rem;
      height:3rem;
      position: relative;
      left:.3rem;
      margin: .1rem .1rem .1rem 0;
      list-style: none;
      float:left;
      border:1px solid white;
      border-radius: .1rem;
      &.active{
        border:1px solid #ab8dac;
       @-webkit-keyframes rotation{
        from {-webkit-transform: rotateY(0deg);}
        to {-webkit-transform: rotateY(360deg);}
      }
      em{
        font-style: normal;
        display: none;
      }
      &.active em{
        display: block;
      }
      .img5{
        padding:.3rem 0 0 0;
        -webkit-transform: rotateY(360deg);
        animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -moz-transform: rotateY(360deg);
      }
      .miao1{
        position: relative;
        top:-.77rem;
        font-size: .2rem;
        color:rgb(107, 36, 102);
      }
     }
      .img5{
        width:1.8rem;
        padding:.3rem 0 0 0;
      }
      h6{
        color: #6e769a;
        font-size: .15rem;
        position: relative;
        top:-.77rem;
      }
      .miao1{
        position: relative;
        top:-.77rem;
        font-size: .2rem;
        color:rgb(107, 36, 102);
      }
      a{
        text-decoration: none;
      }
    }
    li:nth-child(5) {
      .img5{
        position: relative;
        top:.3rem;
      }
      .miao1{
        position: relative;
        top:.15rem;
      }
      h6{
        position: relative;
        top:.15rem;
      }
    }
  }
  .footer{
    width:100%;
    height:.6rem;
    font-size: .2rem;
    position: relative;
    top:2.3rem;
    // background: green;
    border-top:1px solid lightgray;
    li{
      width:20%;
      height:.6rem;
      line-height: .6rem;
      float:left;
      list-style: none;
      color: #6e769a;
      a{
        text-decoration: none;
        color: black;

      }
    }
  }

}
